<!DOCTYPE html>
<html>

<head>
    <title>i18n Enhance</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="../assets/examples.css">

    <script src="../assets/jquery.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="../assets/bootstrap-table/src/extensions/i18n-enhance/bootstrap-table-i18n-enhance.js"></script>
    <script>
        $(function() {
            var $table = $("#table"),
                $buttons = $("button");

            $("#tw_Btn").click(function() {
                $buttons.removeClass("active");
                $(this).addClass("active");

                $table.bootstrapTable("changeLocale", "zh-TW");
                $table.bootstrapTable("changeTitle", {
                    id: "代碼",
                    name: "項目名稱",
                    price: "項目金額"
                });
            });

            $("#us_Btn").click(function() {
                $buttons.removeClass("active");
                $(this).addClass("active");

                $table.bootstrapTable("changeLocale", "en_US");
                $table.bootstrapTable("changeTitle", {
                    id: "ID",
                    name: "Item Name",
                    price: "Item Price"
                });
            });

        });
    </script>
</head>

<body>
    <div class="container">
        <h1>i18n Enhance</h1>
        <label>Language:</label>
        <div class="btn-group" role="group" style="margin-bottom: 4px">
            <button id="tw_Btn" type="button" class="btn btn-default btn-sm active">zh_TW</button>
            <button id="us_Btn" type="button" class="btn btn-default btn-sm">en_US</button>
        </div>

        <table id="table" data-toggle="table" data-url="../json/data1.json" data-pagination="true">
            <thead>
                <tr>
                    <th data-field="id">代碼</th>
                    <th data-field="name">項目名稱</th>
                    <th data-field="price">項目金額</th>
                </tr>
            </thead>
        </table>
    </div>
</body>

</html>
